<template>
  <div class="cart">
    <header>
      <div><i class="iconfont icon-fanhui" @click="goHome"></i></div>
      <div>购物车</div>
      <div class="edit">编辑</div>
    </header>
    <section>
      <!-- 购物车中有数据 -->
      <div v-if="showCart">
        <div>
          <van-checkbox v-model="checked" @click="checkedAll">
            商品
          </van-checkbox>
        </div>
        <ul v-for="(item, index) in cartList" :key="index">
          <li>
            <div @click="select(item.cartID)">
              <van-checkbox v-model="item.checked"></van-checkbox>
            </div>
            <h2><img :src="item.goodsImg" alt="" /></h2>
            <div class="goods">
              <h1>{{ item.content }}</h1>
              <span>￥{{ item.price }}</span>
            </div>
            <div class="icon">
              <van-icon name="delete-o" @click="delGoods(item.cartID)" />
              <van-stepper
                @change="changeNum($event, item)"
                v-model="item.cartNum"
                integer
                max="10"
              />
            </div>
          </li>
        </ul>
      </div>
      <!-- 购物车中没有数据 -->
      <div v-else @click="goHome" class="undata">
        购物车中暂时没有数据，去商品首页看看吧
      </div>
    </section>
    <footer>
      <div>
        <van-checkbox v-model="checked" @click="checkedAll">全选</van-checkbox>
      </div>
      <div class="price">
        <span>总计{{ this.totalNum }} 件商品</span>
        <span
          >总价: <b class="total-price">￥{{ totalPrice }}元</b>
        </span>
      </div>
      <div class="pay" @click="payment">去结算</div>
    </footer>
  </div>
</template>

<script>
import Tabbar from "../../components/common/Tabbar.vue";
import Header from "@/components/home/Header.vue";
import qs from "qs";
export default {
  name: "Cart",
  components: {
    Tabbar,
    Header,
  },

  data() {
    return {
      checked: false,
      showCart: true, //购物车中有数据则显示
      value: 1,
      total: 0, //选中的商品总数
      totalprice: 0, //选中的商品总价
      token: {
        token: "",
      },
      cartList: [], //购物车列表
      // 被选中的商品price
      selectList: [],
      selectListId: [], //被选中的商品id
      delParam: {
        id: "",
      },
      //修改购物车数量
      changeValue: {
        cartID: 0,
        cartNum: 1,
      },
    };
  },
  computed: {
    totalPrice() {
      return this.cartList
        .filter((item) => item.checked === true)
        .reduce(
          (sum, index) => (sum += parseInt(index.price) * index.cartNum),
          0
        );
    },
    totalNum() {
      return this.cartList
        .filter((item) => item.checked === true)
        .reduce((sum, index) => (sum += index.cartNum), 0);
    },
  },
  created() {
    this.getCartGoods();
  },
  methods: {
    //获取购物车数据
    getCartGoods() {
      this.token.token = window.sessionStorage.getItem("token");
      this.$http.post("/getCartGoods", qs.stringify(this.token)).then((res) => {
        // console.log(res.data);
        if (res.data) {
          res.data.forEach((v) => {
            v["checked"] = false;
          });
          this.cartList = res.data;
          // console.log(this.cartList);
        } else {
          this.showCart = false;
        }
      });
    },
    //回到首页
    goHome() {
      this.$router.push("/home");
    },
    //选中商品
    select(id) {
      this.cartList.checked = !this.cartList.checked;
      this.selectListId = [];
      this.cartList.forEach((v, index) => {
        if (this.cartList[index].checked == true) {
          this.selectListId.push(this.cartList[index].cartID);
        }
      });
      window.sessionStorage.setItem("selectListId", this.selectListId);
      if (this.selectListId.length == this.cartList.length) this.checked = true;
      else this.checked = false;
    },

    //全选按钮
    checkedAll() {
      // this.checked = !this.checked;
      this.cartList.forEach((item) => (item.checked = this.checked));
    },
    //修改商品数量
    changeNum(value, item) {
      // console.log(value, item);
      this.changeValue.cartID = item.cartID;
      this.changeValue.cartNum = value;
      this.$http
        .post("/updataCart", qs.stringify(this.changeValue))
        .then((res) => {
          this.totalGoods();
        });
    },
    //删除购物车商品
    delGoods(id) {
      console.log(id);
      this.delParam.id = id;
      this.$http.post("/delCart", qs.stringify(this.delParam)).then((res) => {
        this.$message.success("删除成功！");
      });
      this.getCartGoods();
    },
    //去结算
    payment() {
      if (this.selectListId.length == 0) return;
      //请求接口，将数据插入订单表中
      this.selectListId.token = window.sessionStorage.getItem("token");

      this.$http
        .post("/payOrder", qs.stringify(this.selectListId))
        .then((res) => {
          // console.log(res);
          //将订单编号存入window下
          window.sessionStorage.setItem("orderID", res.data);
          this.$router.push({
            name: "Order",
          });
        });

      // console.log(this.totalprice);
    },
  },
};
</script>

<style lang="less" scoped>
header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  height: 57px;
  background-color: #b0352f;
  color: #fff;
  font-size: 20px;
  i {
    padding: 0 15px;
  }
  .edit {
    padding: 0 20px;
  }
}
section {
  background-color: #eee;
  font-size: 18px;
  width: 100vw;
  height: 100vh;
  .van-checkbox {
    margin: 5px;
    padding: 5px 3px;
  }
  ul {
    padding-bottom: 3px;
  }
  ul li {
    display: flex;
    align-items: center;
    height: 110px;
    background-color: #fff;
    .van-checkbox {
      margin: 5px;
      padding: 5px 3px;
    }
    h1 {
      display: flex;
      align-items: center;
      height: 50px;
      overflow: hidden;
      padding: 0;
      font-size: 13px;
    }
    img {
      width: 100px;
    }
    .goods {
      display: flex;
      flex-direction: column;
      span {
        color: red;
        font-size: 14px;
      }
    }
  }
  .icon {
    display: flex;
    align-items: center;
    justify-items: center;
    flex-direction: column;
    .van-stepper {
      // display: flex;
      // align-items: center;
      // justify-content: center;
      width: 96px;
      margin: 20px 15px;
    }
  }
  .undata {
    color: rgb(48, 48, 240);
  }
}
footer {
  position: fixed;
  left: 0;
  bottom: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 16px;
  height: 50px;
  width: 100%;
  border-top: 1px solid #ccc;
  background-color: #fff;
  .price {
    display: flex;
    flex-direction: column;
    .total-price {
      color: #b0352f;
    }
  }
  .pay {
    padding: 15px 19px;
    background-color: #b0352f;
    color: #fff;
  }
}
</style>